<template>
  <div class="baseInfo">
    <mt-header fixed title="导师信息">
      <router-link to="/teacher" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>

    <div v-if="studentData">
      <div class="infoBox">
        <table class="table">
          <tr v-for="(item, index) in infoData">
            <th>{{ item.name }}</th>
            <td
              v-if="
                item.value === 'sfzjyxq' ||
                  item.value === 'csrq' ||
                  item.value === 'lxrq' ||
                  item.value === 'qxrq' ||
                  item.value === 'cjny' ||
                  item.value === 'byny' ||
                  item.value === 'dzsj'
              "
            >
              {{ studentData[item.value] && moment ? moment(studentData[item.value]).format('YYYY-MM-DD') : '--' }}
            </td>
            <td v-else>{{ studentData[item.value] || '--' }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { teacherUserInfo } from '@/api'
import local from '@/utils/localstorage'
import moment from 'moment'

import { Indicator } from 'mint-ui'
import { infoData } from './data'

export default {
  name: 'baseInfo',
  data() {
    return {
      moment,
      infoData: infoData,
      studentData: ''
    }
  },
  methods: {
    moment,
    getStudentClientInfo() {
      Indicator.open()
      console.log()
      const code = local.get('USER') ? local.get('USER').gh : ''
      if (!code) {
        return
      }
      request
        .get(`${teacherUserInfo}/${code}`, {})
        .then((res) => {
          Indicator.close()
          const r = res.data
          if (r && r.data) {
            this.studentData = r.data
          }
        })
        .catch((err) => {})
    }
  },
  mounted() {
    this.getStudentClientInfo()
  }
}
</script>

<style scoped lang="less">
@import url('../../../assets/styles/base.less');
.baseInfo {
  padding-top: (80 / @base);
  .infoBox {
    padding: (20 / @base);
  }
  table {
    width: 100%;
    th,
    td {
      font-size: (26 / @base);
      padding: (18 / @base) (12 / @base);
      font-weight: normal;
    }
    th {
      vertical-align: top;
      text-align: left;
      width: (100 / @base);
      white-space: nowrap;
    }
    td {
      text-align: right;
      word-wrap: break-word;
      word-break: break-all;
      color: #888;
    }
  }

  tr:nth-child(2n + 1) {
    background: rgb(244, 244, 244);
  }
}
</style>
